<!-- 提交申请 -->
<script lang="ts" setup>
import { ref, reactive, onMounted, h, watch } from 'vue'
import {
  NSpace,
  NButton,
  type FormInst,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  type FormRules,
  useMessage,
  NScrollbar,
  NSpin,
  NDatePicker,
  NTreeSelect,
  NUpload,
  NDataTable,
  NPagination,
  NIcon,
  type DataTableColumns,
  NModal,
  type UploadFileInfo,
  NPopover
} from 'naive-ui'
import { sendRequest } from '@/utils/api'
import FixedAction from '@/components/FixedAction.vue'
import { keysOf } from '@/utils/object'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { imgDefault, preUrlImg } from '@/utils/errordefaultImg'
// import UploadFileV2 from '@/views/common/UploadFileV2.vue'
import TableView from '@/components/TableView.vue'
import { useThingStore } from '@/stores/addThing'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import { ApprovalFilled, ErrorRound,AddCircleFilled} from '@vicons/material'
import useRouteReplace from '@/hooks/useRouteReplace'
import FUploader from '@/views/Collection/Collect/Batch/components/FUploader.vue'

const props = defineProps({
  id: { type: String, default: () => null },
  typeShow: { type: Number, default: () => 0 },
  arr: { type: Array, default: () => 0 }
})
const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
const useInPutStore = useThingStore()
const rowKey: any = (row: any) => row.subItemCode || ''
const tableData: any = ref([])
const message = useMessage()
const baseFormRef = ref<FormInst | null>(null)
const baseTableFormRef = ref<FormInst | null>(null)
const loading = ref(false)
const form: any = reactive({
  orderTypeCode: null,
  collectingOrderEnter: {
    //回库单
    enterDate: null, //入库日期
    fileIds: null,
    fileIdFiles: [], //附件
    humidity: null, // 保管相对湿度
    notes: null, //保管注意事项
    receiveUser: null, //接收人
    temperature: null, // 保管适宜温度
    transferUser: null //移交人
  },
  itemsStaging:{
    assetCode: null,
    firstLevelCode: null,
    threeLevelCode: null,
    secondLevelCode: null,
    fifthLevelCode: null,
    sixthLevelCode: null,
    fourthLevelCode: null,
    firstLeveName: null,
    threeLevelName: null,
    secondLevelName: null,
    fifthLevelName: null,
    sixthLevelName: null,
    fourthLevelName: null,
    serialNumber: null
  },
  subItemCodeList: null //工单类型
})
const optionInPosition0 = ref([])
const optionInPosition1 = ref([])
const optionInPosition2 = ref([])
const optionInPosition3 = ref([])
const optionInPosition4 = ref([])
const optionInPosition5 = ref([])
const getFirstFn = async (id: any, refValue: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: id
      }
    }
  })
  if (error) return message.error(error.message)
  refValue.value = res?.data || []
}
const getLevel = (name: string) => (name ? ' > ' + name : '')
const getPositionName =()=>{
  return  (getLevel(form.itemsStaging.firstLevelName) +
        getLevel(form.itemsStaging.secondLevelName) +
        getLevel(form.itemsStaging.threeLevelName) +
        getLevel(form.itemsStaging.fourthLevelName) +
        getLevel(form.itemsStaging.fifthLevelName) +
        getLevel(form.itemsStaging.sixthLevelName)).slice(3)
}
const changeOptionFn = (e: any, type: any,option:any) => {
  console.log(option,'222')

  switch (type) {
    case 1: {
      form.itemsStaging.firstLevelName = option?.label
      form.itemsStaging.secondLevelName = null
      form.itemsStaging.threeLevelName = null
      form.itemsStaging.fourthLevelName = null
      form.itemsStaging.fifthLevelName = null
      form.itemsStaging.sixthLevelName = null
      form.itemsStaging.secondLevelCode = null
      form.itemsStaging.threeLevelCode = null
      form.itemsStaging.fourthLevelCode = null
      form.itemsStaging.fifthLevelCode = null
      form.itemsStaging.sixthLevelCode = null
      getFirstFn(e, optionInPosition1)
      break
    }
    case 2: {
      form.itemsStaging.secondLevelName = option?.label
      form.itemsStaging.threeLevelName = null
      form.itemsStaging.fourthLevelName = null
      form.itemsStaging.fifthLevelName = null
      form.itemsStaging.sixthLevelName = null
      form.itemsStaging.threeLevelCode = null
      form.itemsStaging.fourthLevelCode = null
      form.itemsStaging.fifthLevelCode = null
      form.itemsStaging.sixthLevelCode = null
      getFirstFn(e, optionInPosition2)
      break
    }
    case 3: {
      form.itemsStaging.threeLevelName = option?.label
      form.itemsStaging.fourthLevelName = null
      form.itemsStaging.fifthLevelName = null
      form.itemsStaging.sixthLevelName = null
      form.itemsStaging.fourthLevelCode = null
      form.itemsStaging.fifthLevelCode = null
      form.itemsStaging.sixthLevelCode = null
      getFirstFn(e, optionInPosition3)
      break
    }
    case 4: {
      form.itemsStaging.fourthLevelName = option?.label
      form.itemsStaging.fifthLevelName = null
      form.itemsStaging.sixthLevelName = null
      form.itemsStaging.fifthLevelCode = null
      form.itemsStaging.sixthLevelCode = null
      getFirstFn(e, optionInPosition4)
      break
    }
    case 5: {
      form.itemsStaging.fifthLevelName = option?.label
      form.itemsStaging.sixthLevelName = null
      form.itemsStaging.sixthLevelCode = null
      getFirstFn(e, optionInPosition5)
      break
    }
  }
}

const formTable: any = reactive({
  serialNumber: '1222',
  childPositionCode:1
})
const dataTrue: any = ref([])
const handleUpdateFileList = (e: UploadFileInfo[], name: any) => {
  form[name].fileIdFiles = e
  // @ts-ignore
  form[name].fileIds = e.map((it) => it.file?.remoteId).join(',')
}
// function findPathInTree(tree, targetValue, path = []) {
//       for (const node of tree) {
//         const currentPath = [...path, node.label]; // 或使用 node.value，取决于你的需求
//         if (node.key === targetValue) {
//           return currentPath; // 找到目标，返回当前路径
//         }
//         if (node.children) {
//           const foundInChildren = findPathInTree(node.children, targetValue, currentPath);
//           if (foundInChildren) {
//             return foundInChildren; // 在子节点中找到，返回找到的路径
//           }
//         }
//       }
//       return null; // 没有找到目标值
//     }
const modalVisible = ref(false) 
const changePositionName =()=>{
  if(!form.itemsStaging.firstLevelName) return
      
      tableData.value[0].positionName = getPositionName()
      formTable.itemsStaging={...form.itemsStaging}
      formTable.positionName = getPositionName()
      modalVisible.value = false
}
const columns: DataTableColumns = [
  {
    title: '序号',
    key: 'itemName',
    width: '5rem',
    align: 'center',
    render: (e: any, row: any) => {
      return 1
    }
  },
  {
    title: '藏品名称',
    key: 'itemName',
    width: '5rem',
    align: 'center'
  },
  {
    title: '资产码',
    key: 'assetCode',
    width: '5rem',
    align: 'center'
  },
  {
    title: '流水号',
    key: 'serialNumber',
    width: '10rem',
    align: 'center',
    render: (e: any) => [
    h(
            NForm,
            {
              rules: formRulesTable,
              model: formTable,
              ref: baseTableFormRef
            },
            h(
              NFormItem,
              {
                path: 'serialNumber',
                label: ''
              },
              h(
                NInput,
                {
                  type: 'text',
                  allowInput: (value: string)=>{return !value.startsWith(' ') && !value.endsWith(' ')},
                  placeholder: '请输入流水号',
                  value: formTable.serialNumber,
                  onInput:(m)=>{
                   formTable.serialNumber= m
                   tableData.value[0].serialNumber=m
                  },
                },
                {
                  default: () => e.serialNumber
                }
              )
            )
          )
    ]
  },
  {
    title: '版本类型',
    key: 'itemTypeName',
    width: '10rem',
    align: 'center'
  },
  {
    title: '入库位置',
    key: 'positionName',
    width: '30rem',
    align: 'center',
    render: (e: any) => {
      return h(
        'div',
        {
         style:{
          display: 'flex',
          alignItems: 'center',
          justifyContent:'space-between'
         }
        },
        [
          h('span',{},formTable.positionName),
          h(AddCircleFilled,{
            style:{
              width:"20px"
            },
            onClick:async()=>{
              form.itemsStaging={...formTable.itemsStaging}
              await getFirstFn(formTable?.itemsStaging?.firstLevelCode, optionInPosition1)
              await getFirstFn(formTable?.itemsStaging?.secondLevelCode, optionInPosition2)
              await getFirstFn(formTable?.itemsStaging?.threeLevelCode, optionInPosition3)
              await getFirstFn(formTable?.itemsStaging?.fourthLevelCode, optionInPosition4)
              await getFirstFn(formTable?.itemsStaging?.fifthLevelCode, optionInPosition5)
              modalVisible.value=true
            }
          })
        ]
      )
    }
    // render: (e: any) => [
    //   editVisible.value
    //     ? h(
    //         NForm,
    //         {
    //           rules: formRulesTable,
    //           model: formTable,
    //           ref:baseTableFormRef
    //         },
    //         h(
    //           NFormItem,
    //           {
    //             path: 'childPositionCode',
    //             label: '',
               
    //           },
    //           h(
    //             NTreeSelect,
    //             {
    //               options: positionList.value,
    //               clearable: true,
    //               placeholder: '请选择',
    //               showPath: true,
    //               // keyField:'positionCode',
    //               // valueField:'positionCode',
    //               // childrenField:'childList',
    //               style: {
    //                 width: '100%'
    //               },
    //               value: formTable.childPositionCode,
    //               onUpdateValue: (m,option,path)=>{

    //                 formTable.childPositionCode=m
    //                 console.log(m)
    //                 formTable.positionName=findPathInTree(positionList.value,m).join('>')
    //                 console.log(formTable.positionName)
    //                 // findPathInTree(positionList.value,m)
    //               },
    //               // status: formTable.positionName ? 'sucess' : 'error'
    //             },
    //             // {
    //             //   default: () => e.positionName
    //             // }
    //           )
    //         )
    //       )
    //     :  tableData.value[0].positionName
    // ]
  },
  // {
  //   title: '操作',
  //   key: 'action',
  //   width: '10rem',
  //   align: 'center',
  //   render: (e: any) => [
  //     !editVisible.value
  //       ? h(
  //           NButton,
  //           {
  //             type: 'primary',
  //             quaternary: true,
  //             color: '#5fb17f',
  //             style: {
  //               display: editVisible.value ? 'none' : 'inline'
  //             },
  //             onClick: () => {
  //               // deleteItemId.value = e.subItemCode
  //               editVisible.value = true
  //             }
  //           },
  //           {
  //             default: () => '编辑'
  //           }
  //         )
  //       : '',
  //     h(
  //       NButton,
  //       {
  //         type: 'primary',
  //         quaternary: true,
  //         color: '#5fb17f',
  //         style: {
  //           display: editVisible.value ? 'inline' : 'none'
  //         },
  //         onClick: () => {
  //           // deleteItemId.value = e.subItemCode

  //           baseTableFormRef.value?.validate((errors) => {
  //             if (errors) {
  //               return 
  //             }
  //             baseTableFormRef.value?.validate((errors) => {
  //             if (errors) {
  //               return 
  //             }
  //           })
  //           })
  //           tableData.value[0].serialNumber=formTable.serialNumber
  //           tableData.value[0].childPositionCode=formTable.childPositionCode
  //           tableData.value[0].positionName=formTable.positionName
  //           //       baseTableFormRef.value?.validate((error) => {
  //           //   if (error) return false
  //           // })
  //           editVisible.value = false
  //         }
  //       },
  //       {
  //         default: () => '确定'
  //       }
  //     ),
  //     h(
  //       NButton,
  //       {
  //         type: 'primary',
  //         quaternary: true,
  //         color: '#5fb17f',
  //         style: {
  //           display: editVisible.value ? 'inline' : 'none'
  //         },
  //         onClick: () => {
  //           editVisible.value = false
  //         }
  //       },
  //       {
  //         default: () => '取消'
  //       }
  //     )
  //   ]
  // }
]

const formRules: FormRules = {
  collectingOrderEnter: {
    //回库单
    enterDate: {
      required: true,
      trigger: ['blur', 'change'],
      type: 'any',
      message: '不能为空'
    }, //回库日期
    receiveUser: {
      required: true,
      trigger: ['blur', 'input'],
      type: 'any',
      message: '不能为空'
    }, //保管注意事项
    transferUser: {
      required: true,
      trigger: ['blur', 'input'],
      type: 'any',
      message: '不能为空'
    } //移交人
  },
  itemsStaging: { 
    firstLevelCode: {
      // required: optionInPosition0.value.length > 0 ? true : false,
      required: true,
      trigger: ['blur', 'change'],
      type: 'any',
      message: '不能为空'
    }}
 
}
const formRulesTable: FormRules = {
  //  入库位置
  childPositionCode: {
    required: true,
    trigger: ['blur', 'change'],
    type: 'any',
    message: '不能为空'
  },
  // 流水号
  serialNumber: {
    required: true,
    trigger: ['blur', 'input'],
    type: 'any',
    message: '不能为空'
  }
}
const entityId = ref()

const submit = async () => {
  if(!formTable.serialNumber){
    message.info('请填写流水号')
    return
  }
  else if(!formTable.positionName||formTable.positionName=='请选择库房位置'){
    message.info('请填写入库位置')
    return
  }
  const validate = await Promise.all([
    new Promise((resolve, reject) => {
      baseFormRef.value?.validate((error) => {
        if (error) return reject(error)
        resolve(true)
      })
    })
  ])

  if (!validate.every(Boolean)) return
 
  loading.value = true
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'updateStorage',
    override: {
      data: {
        collectingOrderEnter: form.collectingOrderEnter,
        entityId: entityId.value,
        // itemsStagingList: dataTrue.value,
        collectingItemsStaging:{
          ...formTable.itemsStaging,
          // ...tableData.value?.[0],
          serialNumber:formTable?.serialNumber,
          assetCode:formTable?.assetCode
        },
        type: 2 //1初编 2编目
      }
    }
  })
  loading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  goBack()
}
const positionList = ref([])
// 入库位置下拉
const codeFn = async (code: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'baseStoreroomConfigListAll',
    // override: {
    //   params: {
    //     dicCode: code
    //   }
    // }
  })
  if (error) return message.error(error.message)
  positionList.value = res?.data
}

// 获取流程id
const hint = ref()
const workFlowList: any = ref()
const getWorkFlow = async (val: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'getWorkFlow',
    override: {
      params: {
        orderTypeCode: val
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  entityId.value = res.data.entityId
  hint.value = res.data.remark
  workFlowList.value = res.data.workFlowList?.map((it: any) => it).join(' → ')
}
// 返回
const goBack = () => {
  // history.back()
  routeReplace()
}
const deleteId = ref()
const editVisible = ref(false) //编辑状态 false默认显示编辑按钮 true默认显示确定取消按钮
const editId: any = ref()
watch(
  () => route.query?.arr,
  async () => {},
  { deep: true, immediate: true }
)
const getDetail = async () => {
  // 修改回显
  if (route.query?.id) {
    sendRequest({
      module: 'collectProcess',
      api: 'collectingItemsInfo',
      uri: {
        id: route.query?.id
      }
    }).then(async ([err, res]) => {
      if (err) return
      keysOf(res.data).forEach((e) => {
        formTable[e] = res.data[e] as never
      })
      form.itemsStaging={...res.data?.itemsStaging}
      await getFirstFn(0, optionInPosition0)
    await getFirstFn(res.data?.itemsStaging?.firstLevelCode, optionInPosition1)
    await getFirstFn(res.data?.itemsStaging?.secondLevelCode, optionInPosition2)
    await getFirstFn(res.data?.itemsStaging?.threeLevelCode, optionInPosition3)
    await getFirstFn(res.data?.itemsStaging?.fourthLevelCode, optionInPosition4)
    await getFirstFn(res.data?.itemsStaging?.fifthLevelCode, optionInPosition5)
      formTable.serialNumber = res.data?.itemsStaging?.serialNumber
      formTable.assetCode = res.data?.itemsStaging?.assetCode
      formTable.positionName = res.data?.positionName||'请选择库房位置'
      tableData.value = [{ ...res.data,positionName:res.data?.positionName||'请选择库房位置',serialNumber:res.data?.itemsStaging?.serialNumber }]
    })
  }
}
const flat: any = ref(false)
watch(
  () => route.path,
  () => {
    if (route.path == 'collection/process/stepPlan/processUpdate') {
      getDetail()
    }
    if (route.query.flat) flat.value = route.query.flat
  },
  { deep: true, immediate: true }
)
onMounted(async () => {
  await getDetail()
  // codeFn() //暂时接口不能用
  await getWorkFlow('A3508')
})
</script>

<template>
  <DetailFormProvider>
    <div class="main">
      <div class="form_content">
        <NScrollbar>
          <NSpin :show="false">
            <div class="content">
              <div>
                <div class="topTitle">基本信息</div>
                <div
                  class="progressHint"
                  v-if="hint"
                >
                  <NIcon
                    size="20"
                    class="iconStyle"
                  >
                    <ErrorRound />
                  </NIcon>
                  <div
                    style="white-space: pre-wrap"
                    v-html="hint"
                  ></div>
                </div>
                <div class="progress" style='margin-bottom: 10px;'>
                  <div style="display: flex; width: auto; padding: 0 15px">
                    <NIcon
                      :size="20"
                      class="iconStyle"
                    >
                      <ApprovalFilled />
                    </NIcon>
                    <span>审批流程</span>
                  </div>
                  <span
                    style="font-size: 18rem; flex: 1"
                    :style="{ color: !workFlowList ? 'red' : '#79bb92' }"
                  >
                    {{ workFlowList ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
                  </span>
                </div>
              </div>
              <VDisOrEnd
                v-if="flat"
                :id="form.workflowInfoVo?.fromId"
                :assigneeFlag="form.workflowInfoVo?.assigneeFlag"
                typeName="工单审批"
              ></VDisOrEnd>
              <div class="bd-content">
                <DetailFormProvider :disabled="editId === null && editId === undefined">
                  <!-- 入库单 1-->
                  <NForm
                    :model="form"
                    class="bd-card"
                    :rules="formRules"
                    ref="baseFormRef"
                    label-placement="left"
                    require-mark-placement="left"
                    label-width="140"
                    :disabled="editId"
                  >
                    <NSpace>
                      <NFormItem
                        label="入库日期："
                        path="collectingOrderEnter.enterDate"
                      >
                        <NDatePicker
                          placeholder="请选择入库日期"
                          type="date"
                          value-format="yyyy-MM-dd"
                          v-model:formatted-value="form.collectingOrderEnter.enterDate"
                          :input-readonly="true"
                          class="inputWH"
                          clearable
                        />
                      </NFormItem>
                      <NFormItem
                        label="移交人："
                        path="collectingOrderEnter.transferUser"
                      >
                        <NInput
                          placeholder="请输入移交人"
                          v-model:value="form.collectingOrderEnter.transferUser"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="接收人："
                        path="collectingOrderEnter.receiveUser"
                      >
                        <NInput
                          placeholder="请输入接收人"
                          v-model:value="form.collectingOrderEnter.receiveUser"
                          class="inputWH"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="保管适宜温度："
                        path="collectingOrderEnter.temperature"
                      >
                        <NInput
                          placeholder="请输入保管适宜温度"
                          v-model:value="form.collectingOrderEnter.temperature"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="保管相对湿度："
                        path="collectingOrderEnter.humidity"
                      >
                        <NInput
                          placeholder="请输入保管相对湿度"
                          v-model:value="form.collectingOrderEnter.humidity"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="保管注意事项："
                        path="collectingOrderEnter.notes"
                      >
                        <NInput
                          placeholder="请输入保管注意事项"
                          v-model:value="form.collectingOrderEnter.notes"
                          class="inputWH"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="备注："
                        path="collectingOrderEnter.remark"
                      >
                        <NInput
                          placeholder="请输入备注"
                          v-model:value="form.collectingOrderEnter.remark"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="附件："
                        path="collectingOrderEnter.fileIds"
                      >
                        <FUploader
                          :file-list="form.collectingOrderEnter.fileIdFiles"
                          @update:file-list="(e: any) => handleUpdateFileList(e, 'collectingOrderEnter')"
                        />
                        <!-- <NUpload style="padding-top: 5px">
                    <NButton
                      color="#6CB187"
                      ghost
                      size="small"
                    >
                      点击上传
                    </NButton>
                  </NUpload> -->
                      </NFormItem>
                    </NSpace>
                  </NForm>
                </DetailFormProvider>
              </div>
              <NSpace
                justify="space-between"
                style="margin-top: 20rem"
              >
                <div class="topTitle">藏品信息</div>
              </NSpace>
              <div class="table">
                <NDataTable
                  v-bind="props"
                  :bordered="false"
                  :columns="columns"
                  :data="tableData"
                  :rowKey="rowKey"
                  :checked-row-keys="deleteId"
                />
              </div>
              <NModal
    :auto-focus="false"
    v-model:show="modalVisible"
  >
    <VDialogContent
      @close="modalVisible = false"
      @submit="changePositionName"
      title="请选择库房"
    >
        <NForm
                :model="form"
                :rules="formRules"
                ref="userFormRef"
                label-placement="left"
                require-mark-placement="left"
                label-width="140rem"
              >
                <NSpace>
                  <NFormItem
                    label="入库位置："
                    path="itemsStaging.firstLevelCode"
                  >
                    <NSelect
                      v-model:value="form.itemsStaging.firstLevelCode"
                      placeholder="位置1"
                      class="inputWHmin"
                      filterable
                      clearable
                      :options="optionInPosition0"
                      @update-value="(e,option) => changeOptionFn(e, 1,option)"
                      :disabled="props?.typeShow == 1"
                    />
                  </NFormItem>
                  <NFormItem
                    label=""
                    path="itemsStaging.secondLevelCode"
                  >
                    <NSelect
                      v-model:value="form.itemsStaging.secondLevelCode"
                      placeholder="位置2"
                      class="inputWHmin"
                      filterable
                      clearable
                      :options="optionInPosition1"
                      @update-value="(e,option) => changeOptionFn(e, 2,option)"
                      :disabled="props?.typeShow == 1"
                    />
                  </NFormItem>
                  <NFormItem
                    label=""
                    path="itemsStaging.threeLevelCode"
                  >
                    <NSelect
                      v-model:value="form.itemsStaging.threeLevelCode"
                      placeholder="位置3"
                      class="inputWHmin"
                      filterable
                      clearable
                      :options="optionInPosition2"
                      @update-value="(e,option) => changeOptionFn(e, 3,option)"
                      :disabled="props?.typeShow == 1"
                    />
                  </NFormItem>
                  <NFormItem
                    label=""
                    path="itemsStaging.fourthLevelCode"
                  >
                    <NSelect
                      v-model:value="form.itemsStaging.fourthLevelCode"
                      placeholder="位置4"
                      class="inputWHmin"
                      filterable
                      clearable
                      :options="optionInPosition3"
                      @update-value="(e,option) => changeOptionFn(e, 4,option)"
                      :disabled="props?.typeShow == 1"
                    />
                  </NFormItem>
                  <NFormItem
                    label=""
                    path="itemsStaging.fifthLevelCode"
                  >
                    <NSelect
                      v-model:value="form.itemsStaging.fifthLevelCode"
                      placeholder="位置5"
                      class="inputWHmin"
                      filterable
                      clearable
                      :options="optionInPosition4"
                      @update-value="(e,option) => changeOptionFn(e, 5,option)"
                      :disabled="props?.typeShow == 1"
                    />
                  </NFormItem>
                  <NFormItem
                    label=""
                    path="itemsStaging.sixthLevelCode"
                  >
                    <NSelect
                      v-model:value="form.itemsStaging.sixthLevelCode"
                      placeholder="位置6"
                      class="inputWHmin"
                      filterable
                      clearable
                      :options="optionInPosition5"
                      @update-value="(e,option) => changeOptionFn(e, 6,option)"
                      :disabled="props?.typeShow == 1"
                    />
                  </NFormItem>
                </NSpace>
              </NForm>
    </VDialogContent>
  </NModal>
            </div>
          </NSpin>
        </NScrollbar>
      </div>
    </div>
  </DetailFormProvider>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        {{ !editId ? '取消' : '关闭' }}
      </NButton>
      <NButton
        type="primary"
        style="width: 78px"
        @click="submit"
        :loading="loading"
      >
        确定
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 15rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .bd-card {
    padding: 20rem;
    background-color: #e1e1e1;
  }

  .link_content {
    width: 100%;
    display: flex;
    margin-bottom: 10rem;

    .link_item {
      width: 175rem;
      height: 68rem;
      background: #e6e6e6;
      border-radius: 6rem;
      border: 1rem solid #ececec;
      display: flex;
      align-items: center;
      padding-left: 5rem;
      text-decoration: none;
      color: initial;

      img {
        display: block;
        width: 35rem;
        height: 35rem;
        border-radius: 50%;
      }
    }
  }

  .link_item {
    width: 175rem;
    height: 68rem;
    background: #e6e6e6;
    border-radius: 6rem;
    border: 1rem solid #ececec;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    text-decoration: none;
    color: initial;
  }

  img {
    display: block;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .inputWH {
      width: 300rem;
    }

    .inputWHmin {
      width: 150rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;
    }
  }

  .approve {
    display: flex;
    width: 100%;
    margin-bottom: 20rem;
    border-bottom: 1px dashed #bc9e70;

    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 100rem;
      width: auto;
      height: 90rem;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      padding: 12rem;
      margin-right: 10rem;
      margin-bottom: 20rem;

      span:first-child {
        font-size: 16rem;
      }

      span:last-child {
        font-weight: 500;
        color: #5fb17f;
      }
    }
  }

  .link_item2 {
    width: 155rem;
    height: 68rem;
    background: #e6e6e6;
    border-radius: 6rem;
    border: 1rem solid #ececec;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    text-decoration: none;
    color: initial;
  }
}

.link_item1 {
  width: 155rem;
  height: 68rem;
  background: #e6e6e6;
  border-radius: 6rem;
  border: 1rem solid #ececec;
  display: flex;
  align-items: center;
  padding-left: 5rem;
  text-decoration: none;
  color: initial;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

//流程样式
.progress {
  width: 100%;
  min-height: 50rem;
  background-color: #d5e2d8;
  border-radius: 5rem;
  padding: 10rem;
  display: flex;
  align-items: center;
  margin-top: 10rem;
}
.progressHint {
  display: flex;
  width: 100%;
  padding: 5px 15px;
}
.iconStyle {
  margin-right: 5rem;
  color: #5fb17f;
}
</style>
